<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"></meta>
  <title>坑坑别忘了改标题</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style type="text/css">
    body
    {
      background: url(plasma.jpg) no-repeat fixed;
      background-size: 100% 100%;
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
    }
    .col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9
    {
      border: 1px solid #000000;
      border-radius: 6px;
      box-shadow: 0px 0px 12px #000000;
      margin-left: 12px;
      margin-right: 12px;
      background-color: #f0f0f0;
      opacity: 0.7;
      padding: 2%;
    }
    h1{font-size: 54px; color: #000000; font-weight: 500;}
    h2{font-size: 45px; color: #000000; font-weight: 500;}
    h3{font-size: 36px; color: #000000; font-weight: 500;}
    h4{font-size: 27px; color: #000000; font-weight: 500;}
    h5{font-size: 21px; color: #000000; font-weight: 500;}
    h6{font-size: 18px; color: #000000; font-weight: 500;}
    p,td,tr{font-size: 18px; color: #000000; font-weight: 500;}
    .text-success
    {
      color: #444444;
      text-shadow: 0px 0px 12px #40c060;
      font-weight: 600;
    }
    .text-warning
    {
      color: #444444;
      text-shadow: 0px 0px 12px #ffd000;
      font-weight: 600;
    }
    .text-danger
    {
      color: #444444;
      text-shadow: 0px 0px 12px #e01010;
      font-weight: 600;
    }

    .input-group
    {
      margin-bottom: 6px;
      margin-top: 6px;
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
    }
    .form-control[type="text"], .form-control[type="password"], span.form-control
    {
      border: 1px solid #000000;
      border-radius: 3px;
      box-shadow: 0px 0px 6px #000000;
      background-color: #000000;
      color: #ffffff;
    }
    .input-group-addon
    {
      border: 1px solid #444444;
      border-radius: 3px;
      box-shadow: 0px 0px 6px #444444;
      background-color: #444444;
      color: #ffffff;
    }
    
    .btn, .btn-default
    {
      border: 1px solid #444444;
      border-radius: 3px;
      box-shadow: 0px 0px 6px #444444;
      background-color: #444444;
      color: #ffffff;
    }
    
    #progress
    {
      height: 16px;
      display: block;
      border-radius: 8px;
      box-shadow: 0px 0px 8px #f0a030;
      background-color: #f0a030;
      width: 1%;
    }
    #progress_unfilled
    {
      height: 16px;
      display: block;
      border-radius: 8px;
      box-shadow: 0px 0px 8px #444444;
      background-color: #444444;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="text-warning">Topic of this stage</h1>
    <br/><span id="progress_unfilled"><span id="progress" style="width: 43%"></span></span><br/>
    <p class="text-success" style="text-align: right;">Current Progress: 3 / 7</p>
    <br/>

    <div class="row">
    <div class="col-lg-12">
      <p>For the register page.</p>
      <form action="process.php" method="get">
        <div class="input-group">
          <span class="input-group-addon">Input 1:</span>
          <input type="text" class="form-control" placeholder="Input 1" name="Input1"/>
        </div>
        <div class="input-group">
          <span class="input-group-addon">Input 2:</span>
          <input type="text" class="form-control" placeholder="Input 2" name="Input2"/>
        </div>
        <span class="input-group-btn"><input class="btn btn-default" type="submit" value="Submit"/></span>
      </form>
    </div>
    </div>
    <br/><br/><br/>
    <div class="row">
    <div class="col-lg-12">
      <p>The problem for this stage, and so on. Choose this for the formal problem pages.</p>
      <form action="process.php" method="get">
        <div class="input-group">
          <span class="input-group-addon">Result:</span>
          <input type="text" class="form-control" placeholder="Result here"/>
          <span class="input-group-btn"><input class="btn btn-default" type="submit" value="Submit"/></span>
        </div>
      </form>
    </div>
    </div>
    <br/><br/><br/>
    <div class="row">
    <div class="col-lg-12">
      <p>Radio button.</p>
      <form action="process.php" method="get">
        <p>Blablabla...</p>
        <div class="input-group">
          <span class="input-group-addon"><input type="radio" name="prob1" value="1"/></span><span class="form-control">A</span>
          <span class="input-group-addon"><input type="radio" name="prob1" value="2"/></span><span class="form-control">B</span>
          <span class="input-group-addon"><input type="radio" name="prob1" value="3"/></span><span class="form-control">C</span>
          <span class="input-group-addon"><input type="radio" name="prob1" value="4"/></span><span class="form-control">D</span>
        </div>
      </form>
    </div>
    </div>
    <br/><br/><br/>
<div class="row">
<div class="col-sm-12">
  <p>
    欢迎参加少年班学院和信息安全俱乐部共同举办的黑客大赛！有精美礼品等候呦！<br/>
    填写以下联系方式以便我们发放奖品<br/>
    我们会按照通关关数、通关时间、通关情况等确定名次和奖品<br/>
    请务必填写真实有效的信息，因为Section II会要求您验证科大邮箱！<br/>
    如需参考，请访问<a href="http://www.w3school.com.cn" target="_blank" class="text-danger">w3school</a><br/>
    还有您的数学和计算机教材。<br/><br/>
    <strong>P.S.&nbsp;&nbsp;&nbsp;</strong>请认真填写联系方式以确保我们在12月份能够联系您<br/>
  </p>
  <hr/>
  <p>请填写您的联系方式以完成注册：<a class="input" href="./?login">我已有账号</a></p>
    <form action="index.php?submit=1" method="post">
      <div class="input-group"><span class="input-group-addon">登录名称: </span><input class="form-control"  type="text" name="scgy_loginname" /></div>
      <div class="input-group"><span class="input-group-addon">用户密码: </span><input class="form-control"  type="password" name="scgy_password" placeholder="（4-16字符）"/></div>
      <div class="input-group"><span class="input-group-addon">重复密码: </span><input class="form-control"  type="password" name="scgy_password2" /></div>
      <div class="input-group"><span class="input-group-addon">科大邮箱: </span><input class="form-control"  type="text" name="scgy_email" placeholder="（@mail.ustc.edu.cn结尾）"/></div>
      <div class="input-group"><span class="input-group-addon">学生学号: </span><input class="form-control"  type="text" name="scgy_studentnumber" /></div>
      <div class="input-group"><span class="input-group-addon">真实姓名: </span><input class="form-control"  type="text" name="scgy_name" /></div>
      <div class="input-group"><span class="input-group-addon">联系电话: </span><input class="form-control"  type="text" name="scgy_phone" /></div>
      <div class="input-group"><span class="input-group-addon">QQ号码: &nbsp;</span><input class="form-control"  type="text" name="scgy_qq" /></div>
      <span class="input-group-btn"><input class="btn btn-default" type="submit" value="点此注册"/></span>
    </form>
</div>
</div>

  </div>

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>
